import React, { useState } from 'react';
import Link from 'next/link';
import { ArrowLeftIcon, MagnifyingGlassIcon } from '@heroicons/react/24/outline';
import HistorySection from './HistorySection';

const ChatHistory: React.FC = () => {
  const [searchQuery, setSearchQuery] = useState('');

  const thisWeekHistory = [
    '搜索词条内容搜索词条内容搜索词条内容',
    '搜索词条内容搜索词条内容搜索词条内容搜索词条内容',
  ];

  const thisYearHistory = [
    '搜索词条内容搜索词条内容',
    '搜索词条内容搜索词条内容搜索词条内容',
    '搜索词条内容搜索',
    '搜索词条内容搜索词条内容',
    '搜索词条内容',
    '搜索词条内容',
    '搜索词条内容搜索词条内容',
    '搜索词条内容搜索词条内容搜索词条内容',
  ];

  return (
    <div className="min-h-screen bg-gray-50">
      {/* Header */}
      <div className="flex items-center px-4 py-3 bg-white border-b border-gray-100">
        <Link href="/chat" className="mr-3">
          <ArrowLeftIcon className="w-6 h-6 text-gray-600" />
        </Link>
        <span className="text-lg font-medium text-gray-800">历史记录</span>
      </div>

      {/* Search Bar */}
      <div className="p-4 bg-white border-b border-gray-100">
        <div className="relative">
          <MagnifyingGlassIcon className="w-5 h-5 absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" />
          <input
            type="text"
            value={searchQuery}
            onChange={(e) => setSearchQuery(e.target.value)}
            placeholder="搜索"
            className="w-full pl-10 pr-4 py-2 bg-gray-100 rounded-lg text-gray-800 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500"
          />
        </div>
      </div>

      {/* History Sections */}
      <div className="p-4 space-y-6">
        <HistorySection title="本周" items={thisWeekHistory} />
        <HistorySection title="本年" items={thisYearHistory} />
      </div>
    </div>
  );
};

export default ChatHistory;